<template>
	<view class="page page-enterprise-info">
		<view flex items-center justify-between pt14px pb14px>
			<view> <text color-red-5>*</text> 企业类型</view>
			<uni-data-picker :localdata="types" v-model="type" :map="{text:'title',value:'id'}" 
				:clear-icon="false" placeholder="请选择企业类型" popup-title="选择企业类型"
			></uni-data-picker>
		</view>

		<view flex items-center justify-between pt5px pb5px border-t>
			<view> <text color-red-5>*</text> 企业全称</view>
			<uni-easyinput color-gray v-model="firm_name" :inputBorder="false" placeholder="请输入企业全称"></uni-easyinput>
		</view>

		<view pt15px pb15px border-t relative>
			<view pb10px>企业简介</view>
			<textarea :maxlength="200" v-model="company_intro" p-10px bg-gray-1 w-full rounded placeholder="请填写企业简单介绍"/>
			<view absolute bottom-20px right-10px>{{ company_intro.length }} / 200</view>
		</view> 

		<view pt15px pb15px border-t relative>
			<view pb10px>关于我们</view>
			<textarea :maxlength="200" v-model="firm_about" p-10px bg-gray-1 w-full rounded placeholder="请填写关于我们"/>
			<view absolute bottom-20px right-10px>{{ firm_about.length }} / 200</view>
		</view> 

		<view flex items-center justify-between pt5px pb5px border-t>
			<view>注册代码</view>
			<uni-easyinput color-gray v-model="credit_code" :inputBorder="false" placeholder="请输入注册代码"></uni-easyinput>
		</view>

		<view flex items-center justify-between pt5px pb5px border-t>
			<view>法人姓名</view>
			<uni-easyinput color-gray v-model="firm_boss" :inputBorder="false" placeholder="请输入法人姓名"></uni-easyinput>
		</view>
		
		<view flex items-center justify-between pt5px pb5px border-t>
			<view>注册资金</view>
			<uni-easyinput color-gray v-model="registered_capital" :inputBorder="false" placeholder="请输入注册资金"></uni-easyinput>
		</view>

		<view flex items-center justify-between pt5px pb5px border-t>
			<view>成立时间</view>
			<uni-easyinput color-gray v-model="established_time" :inputBorder="false" placeholder="请输入成立时间"></uni-easyinput>
		</view>

		<view flex items-center justify-between pt5px pb5px border-t>
			<view>注册地址</view>
			<uni-easyinput color-gray v-model="firm_address" :inputBorder="false" placeholder="请输入注册地址"></uni-easyinput>
		</view>
		<view flex items-center justify-between pt5px pb5px border-t>
			<view>经营范围</view>
			<uni-easyinput color-gray v-model="business_scope" :inputBorder="false" placeholder="请输入经营范围"></uni-easyinput>
		</view>
		<view flex items-center justify-between pt5px pb5px border-t>
			<view>主营</view>
			<uni-easyinput color-gray v-model="merito" :inputBorder="false" placeholder="请输入"></uni-easyinput>
		</view>
		<view flex items-center justify-between pt5px pb5px border-t>
			<view>联系人</view>
			<uni-easyinput color-gray v-model="contact_person" :inputBorder="false" placeholder="请输入联系人"></uni-easyinput>
		</view>
		<view flex items-center justify-between pt5px pb5px border-t>
			<view>联系电话</view>
			<uni-easyinput color-gray v-model="contact_phone" :inputBorder="false" placeholder="请输入联系电话"></uni-easyinput>
		</view>
		<view flex items-center justify-between pt5px pb5px border-t>
			<view>联系邮箱</view>
			<uni-easyinput color-gray v-model="contact_email" :inputBorder="false" placeholder="请输入联系邮箱"></uni-easyinput>
		</view>
		<view flex items-center justify-between pt5px pb5px border-t>
			<view>联系详细地址</view>
			<uni-easyinput color-gray v-model="contact_address" :inputBorder="false" placeholder="请输入联系详细地址"></uni-easyinput>
		</view>
		<view flex items-center justify-between pt5px pb5px border-t>
			<view>生产人数</view>
			<uni-easyinput color-gray v-model="production_number" :inputBorder="false" placeholder="请输入生产人数"></uni-easyinput>
		</view>
		<view flex items-center justify-between pt5px pb5px border-t>
			<view>研发人数</view>
			<uni-easyinput color-gray v-model="develop_number" :inputBorder="false" placeholder="请输入研发人数"></uni-easyinput>
		</view>
		<view flex items-center justify-between pt5px pb5px border-t>
			<view>生产基地</view>
			<uni-easyinput color-gray v-model="production_base" :inputBorder="false" placeholder="请输入生产基地"></uni-easyinput>
		</view>
		<view flex items-center justify-between pt5px pb5px border-t>
			<view>主要市场</view>
			<uni-easyinput color-gray v-model="principal_market" :inputBorder="false" placeholder="请输入主要市场"></uni-easyinput>
		</view>
		<view flex items-center justify-between pt5px pb5px border-t>
			<view>官网</view>
			<uni-easyinput color-gray v-model="website" :inputBorder="false" placeholder="请输入官网"></uni-easyinput>
		</view>
		<view pt14px pb14px>
			<view pb14px>产品图片</view>
			<uni-file-picker v-model="imageList" limit="3" @select="selectImage" @delete="deleteImage"  :auto-upload="false"></uni-file-picker>
		</view>

		<view fixed w-full bottom-0 left-0 px-3vw py-20px bg-white z-10 box-border>
			<nut-button size="large" type="info" @click="submit">提交</nut-button>
		</view>
	</view>

	
</template>

<script setup>
	import api from '@/api'
	import { ref } from 'vue'
	import { useUserStore } from '@/stores/user'
	import { validate } from '@/common/utils'
	const user = useUserStore()

	const firm_name = ref('')
	const credit_code = ref('')
	const firm_boss = ref('')
	const type = ref('')
	const types = ref([])
	const company_intro = ref('')
	const merito = ref('')
	const registered_capital = ref('')
	const established_time = ref('')
	const firm_address = ref('')
	const business_scope = ref('')
	const contact_person = ref('')
	const contact_phone = ref('')
	const contact_email = ref('')
	const contact_address = ref('')
	const firm_about = ref('')
	const production_number = ref('')
	const develop_number = ref('')
	const production_base = ref('')
	const principal_market = ref('')
	const website = ref('')

	const imageList = ref([])
	let realImages = []
	const selectImage = async ({tempFiles}) => {
		const file = tempFiles[0]
		const uploadRes = await api.uploadFile(file.url)
		if(uploadRes.images) {
			realImages.push(uploadRes.images)
		}
	}
	const deleteImage = ({index}) => {
		realImages.splice(index,1)
	}
	
	async function initData() {
		const list = await api.getEnterpriseType()
		types.value = list
		if(user.userInfo?.type != 'firm') return
		const data = await api.getEnterpriseInfo({ id: user.userInfo.firm_id })
		if(data) {
			firm_name.value = data.firm_name
			firm_boss.value = data.firm_boss
			credit_code.value = data.credit_code
			type.value = data.type
			company_intro.value = data.company_intro,		//string 企业介绍
			merito.value = data.merito,		//string 主营
			registered_capital.value = data.registered_capital	//string 注册资金
			established_time.value = data.established_time	//string 成立时间
			firm_address.value = data.firm_address	//string 注册地址
			business_scope.value = data.business_scope		//string 经营范围
			contact_person.value = data.contact_person		//string 联系人
			contact_phone.value = data.contact_phone		//string 联系电话
			contact_email.value = data.contact_email		//string 联系邮箱
			firm_about.value = data.firm_about //string  关于我们
			production_number.value = data.production_number //string  生产人数
			develop_number.value = data.develop_number //string  研发人数
			production_base.value = data.production_base //string  生产基地
			principal_market.value = data.principal_market //string  主要市场
			website.value = data.website //string  官网
			contact_address.value = data.contact_address
			realImages = data.workshop_pics
			if(data.workshop_pics.length) {
				for(let i = 0,len = data.workshop_pics.length; i< len; i++) {
					imageList.value.push(setImage(data.workshop_pics[i]))
				}
			}

		}
	}
	initData()

	const submit = async () => {

		if(!firm_name.value || !type.value){
			uni.showToast({
				title: '企业名称和类型必须填写',
				icon: 'none'
			})
			return
		}

		if(contact_phone.value && !validate.is_mobile(contact_phone.value)){
			uni.showToast({
				title: '请填写正确的手机号',
				icon: 'none'
			})
			return
		}

		if(contact_email.value && !validate.is_email(contact_email.value)){
			uni.showToast({
				title: '请填写正确的邮箱',
				icon: 'none'
			})
			return
		}

		const id = await api.updateEnterpriseInfo({
			type: type.value,
			firm_name: firm_name.value,
			credit_code: credit_code.value,
			firm_boss: firm_boss.value,
			company_intro: company_intro.value,		//string 企业介绍
			merito: merito.value,		//string 企业介绍
			registered_capital: registered_capital.value,		//string 注册资金
			established_time: established_time.value,		//string 成立时间
			firm_address: firm_address.value,		//string 注册地址
			business_scope: business_scope.value,		//string 经营范围
			contact_person: contact_person.value,		//string 联系人
			contact_phone: contact_phone.value,		//string 联系电话
			contact_email: contact_email.value,		//string 联系邮箱
			firm_about: firm_about.value, //string  关于我们
			production_number: production_number.value, //string  生产人数
			develop_number: develop_number.value, //string  研发人数
			production_base: production_base.value, //string  生产基地
			principal_market: principal_market.value, //string  主要市场
			website: website.value, //string  官网
			contact_address: contact_address.value, //string  联系详细地址
			workshop_pics: JSON.stringify(realImages), //json 图片 车间展示

			contact_province: '', //string  联系省
			contact_city: '', //string  联系市
			contact_area: '', //string  联系区
		})
		if(id) {
			uni.showToast({ 
				title: '更新成功', 
				icon: 'none',
				success: () => {
					const timer = setTimeout(() => {
						uni.navigateBack()
						clearTimeout(timer)
					}, 2000);
				}
			})
		}

	}

	const setImage = url => {
		return {
			url,
			name: url.split('/').pop(),
			extname: url.split('.').pop()
		}
	}

	const back = () => {
		uni.navigateBack()
	}

	
</script>

<style lang="scss">
.page-enterprise-info {
	padding: 10px 10px 180upx;
	.border-t{
		border-top: 1px solid #eee;
	}
	.uni-easyinput  {
		text-align: right;
	}

	.is-add {
		flex-direction: column;
	}

	.input-value-border {
		border: none;
	}
}

</style>
